<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="assess-form" status-icon>
    <div class="hr-bg2"></div>
    <el-form-item label="项目评估" prop="projectName">
      <el-select
        @change="projectNameChange"
        filterable
        v-model="ruleForm.projectName"
        placeholder="请输入项目名称"
        popper-class="pg-custom-cascader"
        clearable
      >
        <el-option v-for="item of ruleForm.projectList" :label="item.label" :value="item.value" class="custom-select-option" />
      </el-select>
    </el-form-item>
    <div class="hr-bg"></div>
    <el-form-item class="district" label="所属区域" prop="district">
      <el-select v-model="ruleForm.district" placeholder="请选择所属区域" popper-class="pg-custom-cascader" clearable>
        <el-option v-for="item of ruleForm.districtList" :label="item.cityName" :value="item.cityCode" class="custom-select-option" />
      </el-select>
    </el-form-item>
    <div class="hr-bg"></div>
    <el-row>
      <el-col :span="12">
        <el-form-item label="面积（m²）" prop="acreage" class="acreage">
          <el-input v-model="ruleForm.acreage" @input="handleInput"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="acreage-l">
        <el-form-item prop="houseTypeBedRoom" label="户型">
          <el-select v-model="ruleForm.houseTypeBedRoom" placeholder="请选择户型" popper-class="pg-custom-cascader" clearable>
            <el-option v-for="item of ruleForm.houseTypeBedRoomList" :label="item.label" :value="item.value" class="custom-select-option" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="hr-bg"></div>
    <el-row>
      <el-col :span="12">
        <el-form-item label="楼层" prop="floor">
          <el-select
            v-model="ruleForm.floor"
            placeholder="请选择楼层"
            popper-class="pg-custom-cascader"
            clearable
            @change="ruleForm.floor = !ruleForm.totalFloor || $event <= ruleForm.totalFloor ? $event : ''"
          >
            <el-option v-for="item of 65" :label="`${item}层`" :value="item" class="custom-select-option" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="acreage-l">
        <el-form-item label="总楼层" prop="totalFloor">
          <el-select
            v-model="ruleForm.totalFloor"
            placeholder="请选择总楼层"
            popper-class="pg-custom-cascader"
            clearable
            @change="ruleForm.totalFloor = !ruleForm.floor || ruleForm.floor <= $event ? $event : ''"
          >
            <el-option v-for="item of 65" :label="`${item}层`" :value="item" class="custom-select-option" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="hr-bg1"></div>
    <el-form-item label="房屋标签" prop="houseTag">
      <el-select
        v-model="ruleForm.houseTag"
        multiple
        collapse-tags
        collapse-tags-tooltip
        popper-class="pg-custom-cascader"
        :show-all-levels="false"
        placeholder="请选择房屋标签"
        clearable
        :teleported="false"
      >
        <el-option v-for="item in ruleForm.houseTagList" :key="item.value" :label="item.label" :value="item.value" class="custom-select-option" />
      </el-select>
    </el-form-item>
  </el-form>
  <div class="hr-bg1" v-if="isAssessAgain"></div>
  <div v-if="isAssessAgain" class="assess-result">
    <div v-for="item of assessResultList" class="assess-result-item">
      <div class="assess-result-item-content">
        <div class="assess-result-item-content__main assess-result-item-content__left">
          {{ item.price }}
        </div>
        <div class="assess-result-item-content__main assess-result-item-content__right">
          <div>{{ item.unit }}</div>
        </div>
      </div>
      <!-- <div class="assess-result-item-error">误差在{{ `${item.startError}${item.unit}` }}~{{ `${item.endError}${item.unit}` }}之间</div> -->
    </div>
  </div>
  <div class="hr-bg1"></div>
  <div class="btn">
    <div class="inquire" style="cursor: pointer" @click="submitForm(ruleFormRef)">开始评估</div>
    <div class="inquire" style="cursor: pointer" @click="resetForm(ruleFormRef)">清空</div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { pxToRem } from "@/utils/index";
import {
  selectAllProjectListSelect,
  getTagSelect,
  getMapSelect,
  moreInfo,
  selectEvaluationItem,
  selectProjectResultInfo,
} from "@/api/gisHouseAnalysAlert";

const ruleFormRef = ref(null);
const ruleForm = reactive({
  projectName: "", // 项目名称
  projectList: [],
  district: "", // 所属区域
  districtList: [],
  acreage: "", // 面积
  houseTypeBedRoom: "", // 卧室数
  houseTypeBedRoomList: [
    // 卧室数-下拉list
    {
      id: 1,
      label: "一室",
      value: 1,
    },
    {
      id: 2,
      label: "二室",
      value: 2,
    },
    {
      id: 3,
      label: "三室",
      value: 3,
    },
  ],
  houseTypeLivingRoom: "", // 客厅数
  houseTypeLivingRoomList: [
    // 客厅数-下拉list
    {
      id: 1,
      label: "一厅",
      value: 1,
    },
    {
      id: 2,
      label: "二厅",
      value: 2,
    },
  ],
  houseTypeBathRoom: "", // 卫生间数
  houseTypeBathRoomList: [
    // 卫生间数-下拉list
    {
      id: 1,
      label: "一卫",
      value: 1,
    },
    {
      id: 2,
      label: "二卫",
      value: 2,
    },
    {
      id: 3,
      label: "三卫",
      value: 3,
    },
  ],
  orientation: "", // 朝向
  orientationList: [
    // 朝向-下拉list
    {
      id: 1,
      label: "东",
      value: 1,
    },
    {
      id: 2,
      label: "西",
      value: 2,
    },
    {
      id: 3,
      label: "南",
      value: 3,
    },
    {
      id: 4,
      label: "北",
      value: 4,
    },
  ],
  floor: "", // 楼层数
  totalFloor: "", // 总楼层数
  houseTag: [], // 房屋标签
  houseTagList: [],
});
const rules = reactive({
  district: [
    {
      required: true,
      trigger: ["change"],
      message: "请选择所属区域",
    },
  ],
  acreage: [
    {
      required: true,
      trigger: ["blur"],
      message: "请输入面积",
    },
  ],
  houseTypeBedRoom: [
    {
      required: true,
      trigger: ["blur"],
      message: "请输入户型",
    },
  ],
  floor: [
    {
      required: true,
      trigger: ["blur"],
      message: "请输入楼层",
    },
  ],
  totalFloor: [
    {
      required: true,
      trigger: ["blur"],
      message: "请输入总楼层",
    },
  ],
});
const isAssessAgain = ref(false);
const assessResultList = ref([
  {
    price: 0,
    unit: "万",
    startError: 0,
    endError: 0,
  },
  {
    price: 0,
    unit: "元/平",
    startError: 0,
    endError: 0,
  },
]);
const handleInput = (value) => {
  // 使用正则表达式匹配正整数
  const regex = /^[1-9]\d*$/;
  // 如果输入的值不是正整数，则将其设置为上一个有效的值
  if (!regex.test(value)) {
    ruleForm.acreage = ruleForm.acreage.substring(0, ruleForm.acreage.length - 1);
  }
};

const submitForm = async (formEl) => {
  // 点击评估按钮
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      selectEvaluationItemFun();
      isAssessAgain.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 房产评估 - 项目下拉
const selectAllProjectListSelectFun = async () => {
  let { data } = await selectAllProjectListSelect({});
  ruleForm.projectList = data;
};
// 房产评估 - 标签下拉
const getTagSelectFun = async () => {
  let { data } = await getTagSelect({});
  ruleForm.houseTagList = data;
};
// 房产评估 - 获取沈阳下区位信息
const getMapSelectFun = async () => {
  let { data } = await getMapSelect({});
  ruleForm.districtList = data;
};
// 房产评估 - 户型
const moreInfoFun = async () => {
  let { data } = await moreInfo({});
  ruleForm.houseTypeBedRoomList = data.hxList;
};

// 房产评估 - 评估
const selectEvaluationItemFun = async () => {
  let queryParams = {
    cityCode: ruleForm.district,
    hx: ruleForm.houseTypeBedRoom,
    lc: ruleForm.floor,
    mj: ruleForm.acreage,
    projectName: ruleForm.projectName,
    tagList: ruleForm.houseTag.map((tag) => tag),
    zlc: ruleForm.totalFloor,
  };
  let { data } = await selectEvaluationItem(queryParams);
  assessResultList.value[0].price = data.ygzj ? data.ygzj : 0;
  assessResultList.value[0].startError = data.minPrice ? data.minPrice : 0;
  assessResultList.value[0].endError = data.maxPrice ? data.maxPrice : 0;
  assessResultList.value[1].price = data.ygdj ? data.ygdj : 0;
  assessResultList.value[1].startError = data.minDj ? data.minDj : 0;
  assessResultList.value[1].endError = data.maxDj ? data.maxDj : 0;
};

// 重置
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  isAssessAgain.value = false;
};

// 导入项目
const projectNameChange = async (val) => {
  ruleForm.district = "";
  ruleForm.houseTypeBedRoom = "";
  ruleForm.floor = "";
  ruleForm.acreage = "";
  ruleForm.houseTag = [];
  ruleForm.totalFloor = "";
  let { data } = await selectProjectResultInfo({ projectName: val });
  ruleForm.district = data.xzqhbm;
  ruleForm.totalFloor = data.szzzc;
};

selectAllProjectListSelectFun();
getTagSelectFun();
getMapSelectFun();
moreInfoFun();
</script>

<style scoped lang="less">
.hr-bg {
  background: url("../../assets/img/gisPage/hr-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 5px;
  margin: 13px 0;
}
.hr-bg1 {
  width: 100%;
  height: 5px;
  margin: 13px 0;
}
.hr-bg2 {
  width: 100%;
  height: 5px;
  margin-bottom: 10px;
}

::v-deep .el-form-item__label {
  width: 127px;
  font-size: 24px;
  color: #fff;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
  // background-color: red;
  justify-content: flex-start;
}

::v-deep .el-input__wrapper {
  background: #1c5e9c;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #75a4eb !important;
  height: 31px;
  box-shadow: none !important;
}
::v-deep .el-select__wrapper {
  height: 31px;
  background: #1c5e9c;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #75a4eb;
  box-shadow: none !important;
  font-size: 18px;
  color: #ffffff;
}
.district ::v-deep .el-select__wrapper {
  width: 100%;
}
::v-deep .el-input-group__append {
  background: #1c5e9c;
  height: 31px;
  border: none;
  color: #29f1fa;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #75a4eb;
  box-shadow: none;
}

.acreage-l {
  padding-left: 20px;
}

.acreage-l ::v-deep .el-form-item__label {
  width: 100px;
}

::v-deep .el-input__inner {
  color: #fff;
}
::v-deep .el-select__wrapper {
  background: #1c5e9c !important;
  border: 1px solid #67c2d0;
  color: #cdd5db;
  font-size: 14px !important;
  box-shadow: none;
}
::v-deep .el-select__placeholder.is-transparent span {
  color: #a8abb2 !important;
}
::v-deep .el-select__input {
  color: #fff !important;
}
::v-deep .el-popper {
  background: #1c5e9c !important;
  border: 0px solid #67c2d0 !important;
  box-shadow: none !important;
}
::v-deep .el-tag {
  background: #da9860 !important;
  color: #ffffff;
  max-width: 400px;
}

::v-deep .el-icon svg {
  color: #ffffff;
}

::v-deep .el-select-dropdown__item {
  color: white !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

::v-deep .el-select-dropdown__item:hover {
  color: #409eff;
  background-color: #fff;
}

.el-select-dropdown .el-select__placeholder__item.selected {
  color: #409eff !important;
  background-color: #fff;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn .inquire {
  width: 196px;
  height: 46px;
  background: linear-gradient(180deg, #9fc1f3 0%, #6e9ce2 100%);
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #002b4f;
}

.btn .inquire:nth-child(2) {
  width: 196px;
  height: 46px;
  background: linear-gradient(180deg, #356ba0 0%, #285785 100%);
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffff;
  margin-left: 88px;
}
.assess-result {
  display: flex;
  justify-content: space-around;
  &-item {
    &-content {
      display: flex;
      align-items: center;
      &__main {
        color: #ffff;
      }
      &__left {
        font-size: 35px;
        color: #ffff;
        font-weight: bolder;
      }
      &__right {
        margin-left: 5px;
        font-size: 12px;
        > div:first-child {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
        }
        > div:last-child {
          font-weight: bolder;
        }
      }
    }
    &-error {
      font-size: 15px;
      color: #a4e3f1;
    }
  }
}
</style>

<style lang="less">
.pg-custom-cascader {
  z-index: 1000000 !important;
  background: #1c5e9c !important;
  li {
    color: white !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }
}
.assess-custom-select-popper {
  z-index: 1000000 !important;
}
</style>
